﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript" src='../Scripts/IndustrialDashboard.js'> </script>
    <script src="http://o.aolcdn.com/dojo/1.4/dojo/dojo.xd.js" type="text/javascript"></script>
    <style type="text/css">
        @import "http://o.aolcdn.com/dojo/1.4/dijit/themes/tundra/tundra.css";
        @import "http://o.aolcdn.com/dojo/1.4/dojox/grid/resources/Grid.css";
        @import "http://o.aolcdn.com/dojo/1.4/dojox/grid/resources/tundraGrid.css";
        .dojoxGrid table
        {
            margin: 0;
        }
    </style>
    <script src="../Widgets/DojoGrid/Scripts/DojoGrid.js" type="text/javascript"></script>
    <style type="text/css">
        body
        {
            background: #2C2C2C;
            margin: 0px;
            top: 0px;
            left: 0px;
            width: 100%;
            height: 100%;
            font-family: Calibri,Microsoft Sans-Serif Serif,Tahoma;
            font-style: normal;
            font-weight: normal;
            font-size: 12px;
            color: #171717;
        }
        .template
        {
            background: #E8E8E8;
            min-width: 650px;
            width: 90%;
            min-height: 450px;
            height: auto;
            border: 1px dotted #A4A2A2;
            margin-top: 2%;
            padding-bottom: 25px;
        }
        .template .title
        {
            color: #E04E06;
            font-size: 16px;
            font-weight: bold;
            text-align: left;
            margin-top: 2.5%;
            min-width: 550px;
            width: 95%;
        }
        .template .sample
        {
            background: #FFFFFF;
            min-width: 550px;
            width: 95%;
            min-height: 250px;
            border: 1px dotted #A4A2A2;
            padding-bottom: 25px;
        }
        .template .content
        {
            background: #FFFFFF;
            min-width: 550px;
            width: 95%;
            margin-top: 2.5%;
            min-height: 50px;
            border: 1px dotted #A4A2A2;
            padding-bottom: 25px;
        }
        .center1
        {
            margin-left: 5%;
        }
        .center2
        {
            margin-left: 2.5%;
        }
        .center3
        {
            margin-left: 30%;
            text-align: center;
        }
        .filter
        {
            text-align: left;
        }
    </style>
    <script language="javascript" type="text/javascript">
        dojo.require("dojox.grid.DataGrid");
        dojo.require("dojo.data.ItemFileWriteStore");
        dojo.require("dojo.data.ItemFileReadStore");
        dojo.require("dojo.parser");
    </script>
</head>
<body>
    <div class="center1">
        <div class="template">
            <div class="center2">
                <div class="title">
                    Industrial Dashboard & Dojox.DataGrid Example</div>
                <div class="sample">
                    <div class="center3">
                        <div class="filter">
                            <select style="width: 120px; height: 22px;" onchange="refreshData(this);">
                                <option value="1">CountryID 1</option>
                                <option value="2">CountryID 2</option>
                                <option value="3">CountryID 3</option>
                                <option value="4">CountryID 4</option>
                                <option value="5">CountryID 5</option>
                            </select>
                        </div>
                        <div class="tundraGrid">
                            <div id="dojoGridContainer" style="width: 50%; height: 150px; margin-top: 25px;">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="content" style='text-align: left; padding: 20px'>
                    <p>
                        In this example, the javascript code needed to invoke the stored procedure <i>dbo.getCitiesListTR(CountryID)</i>
                        is:
                    </p>
                    <pre style='background-color: #E0E0F0'>
    
    attachDomReadyEventHandler(function () {
        var ConnectionParams = new ConnectionParameters();
        ConnectionParams.add(<span style='color: red;'>'CountryID'</span>, 'int', 1);
        var options = { 'URL': '../DALService.svc/CallProcedure', 'Procedure': <span style='color: red;'>'dbo.getCitiesListTR'</span> };
        dojoGrid = new DojoGrid(document.getElementById('dojoGridContainer'), options);
        dojoGrid.RefreshData(ConnectionParams);
    });
    </pre>
                    <p>
                        And this would be the callback of the onChange event in the comboBox
                    </p>
                    <pre style='background-color: #E0E0F0'>
    function refreshData(e) {  
        var target = e || window.event.srcElement;        
        var value = target[target.selectedIndex].value;
        var ConnectionParams = new ConnectionParameters();
        ConnectionParams.add(<span style='color: red;'>'CountryID'</span>, 'int', value);
        dojoGrid.RefreshData(ConnectionParams);
    };
        </pre>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        var dojoGrid;
        attachDomReadyEventHandler(function () {
            //Create QueryParameters Object
            var QueryParams = new QueryParameters();
            //Add QueryParameters(Name, SQLType, Value);                
            QueryParams.Add('CountryID', 'Int', 1);
            //Set Initial Options, using "GetFile" method.
            var options = { 'URL': '../DALService.svc/CallProcedure', 'DatabaseParameters': { 'Procedure': 'dbo.getCitiesList'} };
            //Create an Instance of DojoGridExample
            dojoGrid = new DojoGrid(document.getElementById('dojoGridContainer'), options);
            //Refresh Widget
            dojoGrid.RefreshData(QueryParams);
        });

        function refreshData(e) {
            var target = e || window.event.srcElement;
            var value = target[target.selectedIndex].value;
            var QueryParams = new QueryParameters();
            QueryParams.Add('CountryID', 'Int', value);
            dojoGrid.RefreshData(QueryParams);
        };
         
    </script>
</body>
</html>
